<template>
  <div class="activity-add">
    <x-header>发起活动<a slot="right"></a></x-header>
    <group>
      <x-input title="活动名称" v-model="form.title" placeholder="请输入活动名称"></x-input>
      <x-textarea :max="800" v-model="form.content" placeholder="活动说明"></x-textarea>
      <uploadImage :imglist.sync="form.images"></uploadImage>
      <datetime :min-year="1970" placeholder="请选择" v-model="form.startTime" format="YYYY-MM-DD HH:mm" title="开始时间"></datetime>
      <datetime :min-year="1970" placeholder="请选择" v-model="form.endTime" format="YYYY-MM-DD HH:mm" title="结束时间"></datetime>
      <x-input type="number" title="活动费用" v-model="form.fee" placeholder="请输入活动费用"></x-input>
      <x-input type="number" title="活动人数" v-model.number="form.num" placeholder="请设置活动人数"></x-input>
      <x-input  title="活动地点" v-model="form.place" placeholder="请输入活动地点"></x-input>
      <datetime :min-year="1970" placeholder="请选择" v-model="form.deadline" format="YYYY-MM-DD HH:mm" title="报名截止时间"></datetime>
  </group>
  <x-button class="add-btn" type="primary" @click.native="isValid">提交</x-button>
  <confirm v-model="showNumTips"
    title="提示"
    @on-cancel="showNumTips=false"
    @on-confirm="showNumTips=false;validNum=true;confirmShowNumTips()">
      <p style="text-align:center;">因人数较多，将交由后台审批通过方可发布，请耐心等待~</p>
    </confirm>
  <confirm v-model="showTimeTips"
    title="提示"
    @on-cancel="showTimeTips=false"
    @on-confirm="showTimeTips=false;validTime=true;confirmShowNumTips()">
      <p style="text-align:center;">时间间隔少于30分钟，您确定要继续发布吗？</p>
    </confirm>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
// import Uploader from 'vux-uploader';
import { getUnixTime } from '../../js/utils'
import uploadImage from '../../components/UploadImage'
import { upload } from '../../api/'
import {
  XHeader,
  Datetime,
  Popup,
  Group,
  XButton,
  XTextarea,
  Confirm,
  XInput
} from 'vux';

const IndexStore = namespace('publish');

@Component({
  components: {
    XHeader,
    Datetime,
    uploadImage,
    Popup,
    Group,
    XButton,
    Confirm,
    XTextarea,
    XInput
  }
})
export default class ActivityAdd extends Vue {
  @IndexStore.Action getCreatePost
  images = []
  showNumTips = false
  showTimeTips = false
  validNum = false
  validTime = false
  imgEnLarge = false
  uploadUrl = upload
  form = {
    title: '',
    content: '',
    images: [],
    startTime: '',
    endTime: '',
    fee: '',
    num: '',
    place: '',
    deadline: '',
    type: 1
  }
  imgUrl = ''
  previewMethod (e) {
    this.imgUrl = e.url;
    this.imgEnLarge = true;
  }
  handleImgEnlarge () {
    this.imgEnLarge = false;
  }
  isValid () {
    let flag = true
    this.validNum = false
    this.validTime = false
    const { startTime, endTime, content, images, fee, num, place, deadline, title } = this.form
    if (!deadline) {
      flag = false
      this.$vux.toast.text('请输入活动截止时间', 'middle');
    }
    if (!place) {
      flag = false
      this.$vux.toast.text('请输入活动地点', 'middle');
    }
    if (!num) {
      flag = false
      this.$vux.toast.text('请设置活动人数', 'middle');
    }
    if (!fee) {
      flag = false
      this.$vux.toast.text('请输入活动费用', 'middle');
    }
    if (!endTime) {
      flag = false
      this.$vux.toast.text('请选择活动结束时间', 'middle');
    }
    if (!startTime) {
      flag = false
      this.$vux.toast.text('请选择活动开始时间', 'middle');
    }
    if (images.length === 0) {
      flag = false
      this.$vux.toast.text('请添加活动图片', 'middle')
    }
    if (!content) {
      flag = false
      this.$vux.toast.text('请输入活动说明', 'middle');
    }
    if (!title) {
      flag = false
      this.$vux.toast.text('请输入活动名称', 'middle');
    }
    if (flag) {
      this.confirmShowNumTips()
    }
  }
  confirmShowNumTips () {
    const startTime = new Date(this.form.startTime).getTime()
    const endTime = new Date(this.form.endTime).getTime()
    if (endTime - startTime < 30 * 60 * 1000 && this.validTime === false) {
      this.showTimeTips = true
      return;
    } else {
      this.validTime = true
    }
    if (this.form.num > 20 && this.validNum === false) {
      this.showNumTips = true
      return;
    } else {
      this.validNum = true
    }
    this.doPublish()
  }
  doPublish () {
    if (this.validNum && this.validTime) {
      const { startTime, endTime, content, images, fee, num, type, place, deadline, title } = this.form
      const params = {
        startTime: getUnixTime(startTime),
        endTime: getUnixTime(endTime),
        content: `<pre>${content}</pre>`,
        title,
        imgs: images,
        type,
        activityObj: {
          fee,
          num,
          place,
          deadline: getUnixTime(deadline)
        }
      }
      this.getCreatePost(params).then(msg => {
        if (msg) {
          this.$vux.toast.text(msg, 'middle');
        } else {
          this.$router.push('/home');
          this.$vux.toast.text('发布成功', 'middle');
        }
      })
    }
  }
}
</script>
<style lang="less">
  .activity-add {
    padding-top: 46px;
    .bounce-enter-active {
      animation: bounce-in .3s;
    }
    .bounce-leave-active {
      animation: bounce-in .3s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      100% {
        transform: scale(1);
      }
    }
    .img {
      width: 100%;
    }
    .add-btn {
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
    }
  }
</style>
